<template>
  <div class="live-container">
    <div class="nright" v-if="!isPermission">
      <div class="nright__tip">微信小程序直播功能未开通</div>
      <el-button @click="handleClick" type="primary" size="medium">前往开启</el-button>
      <div class="refresh">已开通未展示？<a>点我刷新</a></div>
      <div class="wblock">
        <div class="wblock__left">温馨提示</div>
        <ul class="wblock__right">
          <li>微信小程序未开通直播，直播功能将无法使用</li>
          <li>
            开通直播功能需在微信小程序添加特定服务类目，<a>具体查看详情</a>
          </li>
        </ul>
      </div>
    </div>
    <div v-else>
      <div class="filter-block">
        <div class="filter-field">
          <el-date-picker v-model="dataRange" :picker-options="pickerOptions" type="daterange" range-separator="-"
            @change="dateChange" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="filter-field">
          <el-popover placement="top-start" width="200" trigger="hover" content="将从微信后台重新获取直播列表，限额一天500次，若只查询使用，请点击查询即可"
            v-if="live">
            <el-button @click="reFreshList" slot="reference">刷新列表数据</el-button>
          </el-popover>
          <el-button type="primary" @click="upMeal" slot="reference" v-if="!live">立即升级</el-button>
          <el-input placeholder="请输入内容" v-model="inputValue" class="input-with-select">
            <el-select v-model="selectValue" slot="prepend" placeholder="请选择">
              <el-option label="直播名称" value="liveName"></el-option>
              <el-option label="主播名称" value="anchor"></el-option>
            </el-select>
            <el-button @click="handelSearch" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="live-table" v-if="live">
        <!-- <draggable
        v-model="pickCategory"
        @change="onMove"
        v-if="pickCategory.length > 0"
      >
          <div
            style="cursor:move;"
            v-for="item in pickCategory"
            :key="item.id"
            class="class__column__item"
          >
            <div class="class__column__head--check">
              <el-checkbox
                @change="handleGoodIdsChange(item.id)"
                :value="selelctList.includes(item.id)"
              ></el-checkbox>
            </div>
            <div class="class__column__head--cell">{{ item.name }}</div>
            <div class="class__column__head--cell flexLine">
              {{ item.productNumber }}
            </div>
            <div class="class__column__head--cell flexLine">
              {{ item.createTime }}
            </div>
            <div style="width:150px;" class="class__column__head--btn">
              <el-button size="mini" type="text" @click="category(item)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="btnDelClass(item)"
                style="color:rgb(250, 100, 101)"
                >删除</el-button
              >
            </div>
          </div>
      </draggable> -->

        <el-table :data="liveTable" style="width: 100%">
          <el-table-column prop="liveName" label="直播名称" min-width="150">
          </el-table-column>
          <el-table-column prop="startTime" label="开播时间" sortable width="200">
            <template slot-scope="scope">
              {{ scope.row.startTime }}-{{ scope.row.endTime }}
            </template>
          </el-table-column>
          <template slot="empty">
            <div class="emptyLine">暂无数据~</div>
          </template>
          <el-table-column prop="anchor" label="主播信息" min-width="120">
          </el-table-column>
          <el-table-column prop="viewCount" min-width="100" sortable label="观看量">
          </el-table-column>
          <el-table-column prop="likeCount" min-width="100" sortable label="获赞量">
          </el-table-column>
          <el-table-column width="130" label="操作">
            <template slot-scope="scope">
              <a @click="qrCodeVisible = true">分享</a>
              <a style="margin-left: 8px" @click="changeStatus(scope.row)">
                {{ scope.row.firstFlag === 1 ? "取消首页" : "设为首页" }}
              </a>
            </template>
          </el-table-column>
        </el-table>

        <br /><br />
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
          @size-change="handleSizeChange" :page-size="pageSize" layout="total, prev, pager, next, sizes" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="qrCodeVisible" width="30%">
      <div style="text-align: center">
        <img :src="codeImg" alt style="width: 200px; height: 200px" /><br /><br />
        <a :href="codeImg" download="wxcode">保存小程序码</a>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component
} from "vue-property-decorator";

import {
  getLiveList,
  reFreshList,
  updateLanuch,
  getImgCode,
  sort,
} from "@/api/live/index";
import DateUtil from "@/store/modules/date";
import {
  getShopFunction
} from "@/api/finance";
import store from "@/store";
import Draggable from "vuedraggable";
  @Component({
    components: {
      Draggable,
    },
  })
export default class Live extends Vue {

    /** 是否开通直播功能 */
    isPermission = true;

    /** 筛选字段 */
    dataRange = [];

    selectValue = "liveName";

    inputValue = "";

    /* 表格字段 */
    liveTable = [];

    currentPage = 1;

    pageSize = 10;

    total = 0;

    /* 弹窗字段 */
    qrCodeVisible = false;

    areaVisible = false;


    /** 配送设置内容 */
    rections = {
      autoShippingState: 1 /** 设置新增提货点是否自动设置送货上门,0false=禁用,1true=启用 */ ,
      goodPointIdsPercentage: "",
    };

    /* 过滤参数 */
    filter = {
      current: 1,
      size: 10
    };


    /* 日期组件参数 */
    pickerOptions = {
      onPick: ({
        minDate,
        maxDate
      }) => {
        if (minDate && maxDate) {
          this.fetchLiveList({
            current: 1,
            startTime: this.dateConversion(minDate),
            endTime: this.dateConversion(maxDate),
          });
        }
      },
    };

    autoStatus = false;

    /* 分享二维码 */
    codeImg = "";

    /* 直播权限 */
    live = true;

    dateConversion(value) {
      const date = new DateUtil("").getYMDs(value);
      return date;
    }

    created() {
      this.fetchLiveList();
      this.fetchImgCode();
      this.getFuction();
    }

    /* 文本框输入搜索 */
    handelSearch() {
      this.fetchLiveList({
        current: 1,
        liveName: undefined,
        anchor: undefined,
        [this.selectValue]: this.inputValue,
      });
    }

    fetchImgCode() {
      const wxaGetwxacode = {
        path: `subcontract/pages/live/live`,
        width: 0,
      };
      getImgCode(wxaGetwxacode).then(res => {
        this.codeImg = res.data;
      });
    }

    /* 获取直播功能权限 */
    getFuction() {
      const params = {
        tenantId: store.state.user.userInfo.shopInfoVo.tenantId,
        shopId: store.state.user.userInfo.shopInfoVo.shopId,
      };
      getShopFunction(params)
        .then(res => {
          this.live = res.data.live;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }

    /* 升级套餐 */
    upMeal() {
      this.$router.push("/meal");
    }

    /* 获取直播列表 */
    fetchLiveList(data = {}) {
      this.filter = {
        ...this.filter,
        ...data
      };
      getLiveList(this.filter)
        .then(res => {
          if (res.code === 200) {
            this.liveTable = (res.data.list || []).map(v => {
              v.likeCount = +v.likeCount;
              v.viewCount = +v.viewCount;
              return v;
            });
            this.currentPage = res.data.current;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }

    /**
     * 设为首页/取消首页
     */
    changeStatus(item) {
      updateLanuch({
        id: item.id,
        firstFlag: item.firstFlag === 1 ? 0 : 1,
      }).then(() => {
        this.$message.success("操作成功");
        this.fetchLiveList();
      });
    }

    /* 刷新后台数据库列表 */
    reFreshList() {
      reFreshList({}).then(()=>{
        this.fetchLiveList({
          current: 1,
          liveName: undefined,
          anchor: undefined,
          [this.selectValue]: this.inputValue,
        });
      });
    }

    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchLiveList({
        size: val
      });
    }

    dateChange(date) {
      !date && this.fetchLiveList({
        startTime: undefined,
        endTime: undefined
      });
    }

    handleClick() {
      this.isPermission = true;
    }

    /* 列表翻页操作 */
    handleCurrentChange(val) {
      this.fetchLiveList({
        current: val
      });
    }
}
</script>

<style lang="scss" scoped>
  @include b(live-container) {
    a {
      color: #409eff !important;
      cursor: pointer !important;
    }

    /deep/.el-table--small th {
      padding: 4px 0;
    }
  }

  @include b(nright) {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 200px;

    @include e(tip) {
      font-size: 16px;
      margin-bottom: 12px;
    }
  }

  @include b(refresh) {
    color: rgba(0, 0, 0, 0.25);
    margin-top: 24px;
  }

  @include b(wblock) {
    text-align: left;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.25);
    margin-top: 150px;

    @include e(left) {
      float: left;
      margin-left: 50px;
    }

    @include e(right) {
      float: left;
      margin-left: 50px;

      li {
        margin-bottom: 12px;
      }
    }
  }

  @include b(filter-block) {
    display: flex;
    justify-content: space-between;

    /deep/.el-input-group__prepend input {
      width: 100px;
    }

    .filter-field:last-child {
      /deep/.input-with-select {
        width: 310px;
        margin-left: 6px;
      }

      width: 430px;
    }
  }

  @include b(live-table) {
    margin-top: 16px;

    /deep/th {
      background: #f5f7fa;
      color: rgba(0, 0, 0, 0.65);
    }

    /deep/.el-pagination {
      text-align: right;
    }
  }

  .emptyLine {
    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-left: -15px;
    font-size: 14px;
    color: #b3b3b3;
  }
</style>